<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>修改商品</title>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  </head>
  <body>
    <div class="container">
      <legend>修改商品</legend>
      <div class="form-group">
        <label for="">修改商品名</label>
        <input
          type="text"
          class="form-control"
          id="pname"
          placeholder="请输入商品名"
        />
      </div>
      <div class="form-group">
        <label for="">修改价格</label>
        <input
          type="text"
          class="form-control"
          id="pprice"
          placeholder="请输入商品价格"
        />
      </div>
      <div class="form-group">
        <label for="">修改商品描述</label>
        <textarea
          class="form-control"
          id="pdesc"
          cols="30"
          rows="10"
          placeholder="请输入商品描述"
        ></textarea>
      </div>
      <div class="form-group">
        <label for="">重新选择图片</label>
        <input
          type="file"
          class="form-control"
          id="imgIpt"
          placeholder="请添加商品图片"
        />
        <img src="" alt="" id="pimg" style="width: 150px; height: 150px" />
      </div>
      <button type="submit" class="btn btn-primary">修改商品</button>
    </div>

    <script>
      let imgUrl = "";
      $("#imgIpt").change(function () {
        let formdata = new FormData(); //文件上传使用FormData对象
        formdata.append("avatar", $("#imgIpt")[0].files[0]);
        $.ajax({
          url: "/profile",
          type: "post",
          data: formdata,
          processData: false,
          contentType: false,
          success: function (res) {
            console.log(res);
            $("#pimg").attr("src", "http://localhost:8888/" + res.path);
            console.log($("#pimg").attr("src"));
            imgUrl = "http://localhost:8888/" + res.path;
          },
        });
      });

      //获取上个页面传来的pid
      let params = new URLSearchParams(location.search);
      let pid = params.get("pid");
      console.log(pid);
      //刷新详情列表
      onloadDetail();
      function onloadDetail() {
        $.ajax({
          url: "/doDetail/" + pid,
          type: "get",
          success: function (res) {
            console.log(res);
            $("#pname").val(res.data.pname);
            $("#pprice").val(res.data.pprice);
            $("#pdesc").val(res.data.pdesc);
            $("#pimg").attr("src", res.data.pimg);
          },
        });
      }
      //   修改操作
      $("button").click(function () {
        let pname = $("#pname").val();
        let pprice = $("#pprice").val();
        let pdesc = $("#pdesc").val();
        let pimg = imgUrl;
        let params = {
          pname: pname,
          pprice: pprice,
          pdesc: pdesc,
          pimg: pimg,
        };
        console.log(params);
        $.ajax({
          url: "/edit/" + pid,
          type: "put",
          data: params,
          success: function (res) {
            console.log(res);
            alert(res.msg);
            if (res.code == 200) {
              location.href = "/myshop";
            }
          },
        });
      });
    </script>
  </body>
</html>
